<template>
  <div class="api-example">
    <h3>API读写操作示例</h3>
    
    <!-- 读取数据部分 -->
    <div class="read-section">
      <h4>读取数据</h4>
      <el-button type="primary" @click="fetchData" :loading="loading.read">
        获取用户列表
      </el-button>
      
      <el-table :data="userList" border style="width: 100%; margin-top: 20px" v-if="userList.length > 0">
        <el-table-column prop="UserId" label="用户ID" />
        <el-table-column prop="UserName" label="用户名" />
        <el-table-column prop="NickName" label="昵称" />
      </el-table>
      
      <p v-if="userList.length === 0 && !loading.read">暂无数据，点击按钮获取</p>
    </div>

    <!-- 写入数据部分 -->
    <div class="write-section" style="margin-top: 30px">
      <h4>写入数据</h4>
      <el-form :model="formData" label-width="100px" style="max-width: 400px">
        <el-form-item label="用户名">
          <el-input v-model="formData.UserName" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="formData.NickName" placeholder="请输入昵称" />
        </el-form-item>
        <el-form-item>
          <el-button 
            type="success" 
            @click="submitData" 
            :loading="loading.write"
            :disabled="!formData.UserName || !formData.NickName">
            提交数据
          </el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 操作结果 -->
    <div class="result-section" style="margin-top: 30px" v-if="operationResult">
      <h4>操作结果</h4>
      <el-alert :title="operationResult" type="info" show-icon />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { ElMessage } from 'element-plus';
import { get, post } from '@/api';

// 读取的数据
const userList = ref<any[]>([]);

// 写入的表单数据
const formData = reactive({
  UserName: '',
  NickName: ''
});

// 加载状态
const loading = reactive({
  read: false,
  write: false
});

// 操作结果
const operationResult = ref('');

// 读取数据的方法
const fetchData = async () => {
  loading.read = true;
  operationResult.value = '';
  
  try {
    const response = await get('/Management/GetUser', { 
      params: { 
        PageIndex: 1, 
        PageSize: 10 
      } 
    });
    
    if (response.Code === 200) {
      userList.value = response.Result.Value || [];
      operationResult.value = `成功获取 ${userList.value.length} 条用户数据`;
      ElMessage.success('数据获取成功');
    } else {
      ElMessage.error(response.Message || '获取数据失败');
    }
  } catch (error: any) {
    console.error('读取数据失败:', error);
    ElMessage.error('读取数据失败: ' + (error.message || '网络错误'));
  } finally {
    loading.read = false;
  }
};

// 写入数据的方法
const submitData = async () => {
  loading.write = true;
  operationResult.value = '';
  
  try {
    // 这里使用示例端点，您需要根据实际后端接口调整
    const response = await post('/Operate/InsertUser', formData);
    
    if (response.Code === 300) {
      operationResult.value = '数据提交成功：' + response.Message;
      ElMessage.success('数据提交成功');
      resetForm();
      
      // 提交成功后重新获取数据
      fetchData();
    } else {
      ElMessage.error(response.Message || '提交数据失败');
    }
  } catch (error: any) {
    console.error('写入数据失败:', error);
    ElMessage.error('写入数据失败: ' + (error.message || '网络错误'));
  } finally {
    loading.write = false;
  }
};

// 重置表单
const resetForm = () => {
  formData.UserName = '';
  formData.NickName = '';
};
</script>

<style scoped>
.api-example {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.read-section, .write-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #eaeaea;
  border-radius: 8px;
}

h3, h4 {
  color: #333;
  margin-bottom: 20px;
}
</style>